<template>
  <div>
    <!--    <van-field-->
    <!--      v-model="resultLabel"-->
    <!--      v-bind="$attrs"-->
    <!--      readonly-->
    <!--      is-link-->
    <!--      input-align="right"-->
    <!--      @click="show = !show"-->
    <!--    />-->
    <!--    <van-popup v-model="show" position="bottom" class="">-->
    <div class="van-picker__toolbar">
      <button class="van-picker__cancel" type="button" @click="cancel">
        取消
      </button>
      <button class="van-picker__confirm" type="button" @click="onConfirm">
        确认
      </button>
    </div>
    <div class="checkbox-con" style="max-height: 264px; overflow-y: auto">
      <van-cell v-if="columns.length>0" title="全选">
        <template #right-icon>
          <van-checkbox v-model="checkedAll" name="all" @click="toggleAll" />
        </template>
      </van-cell>
      <van-checkbox-group
        ref="checkboxGroup"
        v-model="checkboxValue"
        :max="maxSelect"
        @change="change"
      >
        <van-cell-group>
          <van-cell
            v-for="(item, index) in columns"
            :key="item[option.value]"
            :title="item[option.label]"
            clickable
            @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox ref="checkboxes" :name="item[option.value]" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </div>
    <!--    </van-popup>-->
  </div>
</template>

<script>
export default {
  name: 'VanFieldCheckbox',
  // model: {
  //   prop: "selectValue",
  // },
  props: {
    columns: {
      type: Array,
      default: function() {
        return []
      }
    },
    selectValue: {
      type: Array,
      deep: true,
      default: function() {
        return []
      }
    },
    maxSelect: {
      type: Number,
      default: 100
    },
    option: {
      type: Object,
      default: function() {
        return { label: 'label', value: 'value' }
      }
    }
  },
  computed: {},
  data() {
    return {
      show: true,
      checkboxValue: JSON.parse(JSON.stringify(this.selectValue)),
      checkedAll: false,
      resultValue: JSON.parse(JSON.stringify(this.selectValue))
    }
  },
  methods: {
    getData(val) {
      //过滤出所选数据的obj集合
      const res = this.columns.filter((item) => {
        return val.indexOf(item[this.option.value]) > -1
      })
      return res
    },
    onConfirm() {
      //确定
      this.resultValue = this.checkboxValue
      // this.show = !this.show;
      this.$emit('confirm', this.resultValue, this.getData(this.resultValue))
    },
    change(val) {
      //当数据选中变化时
      this.$emit('change', val, this.getData(this.resultValue))
    },
    cancel() {
      //取消
      // this.show = !this.show;
      this.$emit('cancel', this.resultValue)
    },
    toggle(index) {
      //cell点击事件，同步checkbox
      this.$refs.checkboxes[index].toggle()
    },
    toggleAll(all) {
      //全选
      this.$refs.checkboxGroup.toggleAll(this.checkedAll)
    }
  },
  watch: {
    selectValue: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.resultValue = newVal
        if (newVal.length !== this.columns.length) {
          this.checkedAll = false
        } else {
          this.checkedAll = true
        }
        for (let i = 0; i < this.columns.length; i++) {
          if (newVal.indexOf(this.columns[i][this.option.value]) > -1) {
            this.$refs.checkboxes[i].toggle(true)
          } else {
            this.$refs.checkboxes[i].toggle(false)
          }
        }
      }
    },
    resultValue(val) {
      this.$emit('input', val)
    },
    checkboxValue(val) {
      //监听数据变化，判断全选的状态
      if (val.length !== this.columns.length) {
        this.checkedAll = false
      } else {
        this.checkedAll = true
      }
    }
  }
}
</script>

<style>
.van-cell__title {
  text-align: left;
}
</style>
